<template>
  <el-container>
    <el-header>让蓝心大模型生成手账</el-header>
    <el-main>
      <el-input
        type="textarea"
        v-model="message"
        placeholder="在这里输入你的消息..."
      >
      </el-input>
      <el-button type="primary" @click="sendMessage">发送</el-button>
      <div v-for="msg in messages" :key="msg.id" class="message-item">
        <span>{{ msg.content }}</span>
        <el-button type="text" @click="copyToClipboard(msg.content)">复制</el-button>
      </div>
      <el-button type="text" @click="backDescription(this.placeId)">返回</el-button>
    </el-main>
  </el-container>
</template>

<script>
import axios from 'axios';
export default {
  props: ['placeId'],
  data() {
    return {
      message: '帮我根据描述生成手账文本描述：',
      messages: [],
    };
  },
  methods: {
    sendMessage() {
      if (!this.message.trim()) {
        return; // 阻止发送空消息
      }
      axios.post('/api/chat/send')
        .then(response => {
          const responseData = response.data;
          if (responseData && responseData.data && responseData.code === 0) {
            this.messages.push({
              id: this.messages.length + 1,
              content: responseData.data.content // 显示从服务器返回的内容
            });
            this.message = ''; // 发送后清空输入框
          } else {
            console.error('接收到错误或格式无效:', responseData);
          }
        })
        .catch(error => {
          console.error('发送消息错误:', error);
          this.messages.push({
            id: this.messages.length + 1,
            content: `错误：${error.message || "与服务器通信失败"}`
          });
        });
    },
    copyToClipboard(text) {
      navigator.clipboard.writeText(text).then(() => {
        this.$message.success('已复制到剪贴板');
      }).catch(err => {
        this.$message.error('复制失败');
        console.error('复制失败:', err);
      });
    },
    backDescription(placeId) {
  // 使用Vuex getter获取指定placeId的地点信息
  const place = this.$store.getters.getPlaceById(placeId);
  if (place) {
    // 如果找到地点信息,则跳转到PlaceDetail页面
    this.$router.push({ name: 'PlaceDetail', params: { placeId } });
  } else {
    // 如果未找到地点信息,打印错误信息
    console.error('地点未找到');
  }
}
  }
}
</script>

  <style scoped>
  .message-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
  }
  </style>